<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html; charset=UTF-8">
			<script type="text/javascript" src='options.js'></script>
			<title>Done</title>
		</head>
		<body>
			<div>
				<h3>Instructions:</h3>
				<p>Adapt this code into your application. Don't forget to 
				include script references to JQuery and the JQuery Qtip plugin (including css, provided immediately below)!</p>
<pre>&lt;link type="text/css" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css" rel="stylesheet" /&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"&gt;&lt;/script&gt;
</pre>
				<p>The following css is also required (for the control div).</p>

<pre>
#t-btm-center-menu {
   float:left;
   width:99%;
   background:#fff;
   border-top:4px solid #000;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:absolute;
   bottom:0;
}
#t-btm-center-menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#t-btm-center-menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#t-btm-center-menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#t-btm-center-menu ul li a:hover {
   background:#000;
   color:#fff;
}
#t-btm-center-menu ul li a.active,
#t-btm-center-menu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}
</pre>

			</div>
			<div>
				<h3>Output:</h3>
				<pre>
$(window).load(function(){
	var STYLES = {
	    NONE: '',
	    RED: '-red', 
	    BLUE: '-blue', 
	    DARK: '-dark', 
	    LIGHT: '-light', 
	    GREEN: '-green', 
	    JTOOLS: '-jtools', 
	    PLAIN: '-plain', 
	    YOUTUBE: '-youtube', 
	    CLUETIP: '-cluetip', 
	    TIPSY: '-tipsy', 
	    TIPPED: '-tipped', 
	    BOOTSTRAP: '-bootstrap',
	    ROUNDED: '-rounded'
	};
	 
	var FOCUS = {
	    TOP_LEFT: 'top left', 
	    TOP_RIGHT: 'top right', 
	    TOP_CENTER: 'top center',
	    BOTTOM_LEFT: 'bottom center', 
	    BOTTOM_RIGHT: 'bottom right', 
	    BOTTOM_CENTER: 'bottom center',
	    RIGHT_CENTER: 'right center', 
	    RIGHT_TOP: 'right top', 
	    RIGHT_BOTTOM: 'right bottom',
	    LEFT_CENTER: 'left center', 
	    LEFT_TOP: 'left top', 
	    LEFT_BOTTOM: 'left bottom', 
	    CENTER: 'center'
	};
	 
	var steps = [
	// Here are your custom steps!</pre>
						<div id="step-div" ></div>
<pre>	];
						 
	$(document).ready(function() {
	    // Set up tutorial
	    $(document.body).qtip({
	        id: 'step',
	        // Give it an ID of ui-tooltip-step so we an identify it easily
	        content: {
	            text: steps[0].content,
	            // Use first steps content...
	            title: {
	                text: steps[0].title,
	                // ...and title
	                button: true
	            }
	        },
	        position: {
	            my: steps[0].tipFocus,
	            at: steps[0].elFocus,
	            target: steps[0].target,
	            // Also use first steps position target...
	            viewport: $(window) // ...and make sure it stays on-screen if possible
	        },
	        show: {
	            event: false,
	            // Only show when show() is called manually
	            ready: true // Also show on page load
	        },
	        hide: false,
	        // Don't' hide unless we call hide()
	        events: {
	            render: function(event, api) {
	                // Grab tooltip element
	                var tooltip = api.elements.tooltip;
	 
	                // Track the current step in the API
	                api.step = 0;
	 
	                // Bind custom custom events we can fire to step forward/back
	                tooltip.bind('next prev', function(event) {
	                    // Increase/decrease step depending on the event fired
	                    api.step += event.type === 'next' ? 1 : -1;
	                    api.step = Math.min(steps.length - 1, Math.max(0, api.step));
	 
	                    // Set new step properties
	                    var current = steps[api.step];
	                    if (current) {
	                        api.set({
	                            'content.text': current.content,
	                            'content.title.text': current.title,
	                            'position.target': current.target,
	                            'position.my': current.tipFocus,
	                            'position.at': current.elFocus,
	                            'style.classes': 'ui-tooltip-shadow ui-tooltip' + current.style
	                        });
	                    }
	                });
	            }
	        },
	        style: {
	            classes: 'ui-tooltip-shadow ui-tooltip' + steps[0].style,
	            def: false
	        }
	    });
	 
	    // Inject control div
	    var $ctrlDiv = $('&lt;div id="t-btm-center-menu"&gt;'+
	                         '&lt;ul&gt;'+
	                            '&lt;li&gt;&lt;a id="start" href="#"&gt;Begin&lt;/a&gt;&lt;/li&gt;'+
	                            '&lt;li&gt;&lt;a id="prev" href="#"&gt;&lt; Prev&lt;/a&gt;&lt;/li&gt;'+
	                            '&lt;li&gt;&lt;a id="next" href="#"&gt;Next &gt;&lt;/a&gt;&lt;/li&gt;'+
	                            '&lt;li&gt;&lt;a id="end" href="#"&gt;End&lt;/a&gt;&lt;/li&gt;'+
	                        '&lt;/ul&gt;'+
	                     '&lt;/div&gt;');
	    $('body').append($ctrlDiv);
	 
	    // Setup the next/prev links
	    $('#next, #prev').bind('click', function(event) {
	        var tooltip = $('#ui-tooltip-step');
	 
	        // If it isn't visible don't do anything
	 
	 
	        // Trigger the tooltip event
	        tooltip.triggerHandler(this.id);
	 
	        // Stop the link from actually clicking
	        event.preventDefault();
	    });
	 
	    // Setup the start/end links
	    $('#start, #end').bind('click', function(event) {
	        var api = $('#ui-tooltip-step').qtip();
	 
	        // Reset the API step to -1
	        api.step = -1;
	 
	        if (this.id === 'start') {
	            // Trigger next handler to update content with first step
	            api.elements.tooltip.triggerHandler('next');
	 
	            // Show tooltip and next/prev buttons
	            api.show();
	            $('#next, #prev').show();
	        }
	 
	        // If we're ending the tour, hide the tooltip and the next/prev links
	        else {
	            api.hide();
	            $('#next, #prev').hide();
	        }
	        // Stop the link from actually clicking
	        event.preventDefault();
	    });
	});
}); 
</pre>
			</div>
		</body>
	</html>